<template>
  <!--bg-black dk aside hidden-print-->

  <aside class="bg-black dk aside-md hidden-print" :class='leftNav? "nav-xs":""' id="nav">
    <section class="vbox">
      <section class="w-f-md scrollable">
        <div class="slimScrollDiv" style="position: relative; overflow: scroll; width: auto; height: auto;">
          <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px"
               data-railopacity="0.2" style="overflow: scroll; width: auto; height: auto;">
            <!-- nav -->
            <nav class="nav-primary hidden-xs">
              <ul class="nav bg clearfix">
                <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                  推荐
                </li>
                <li>
                  <router-link to='/musicHome'>
                    <i class="fa fa-bar-chart-o text-success"></i>
                    <span class="font-bold">发现音乐</span>
                  </router-link>
                </li>
                <li>
                  <router-link to='/musicRecommend'>
                    <i class="icon-trophy icon text-primary-lter"></i>
                    <span class="font-bold">歌手排行</span>
                  </router-link>
                </li>
                <li>
                  <router-link to='/musicSingerContent'>
                    <i class=" icon-fire text-danger"></i>
                    <span class="font-bold">音乐排行榜</span>
                  </router-link>
                </li>
                <li>
                  <router-link to='/musicMvContent' data-target="#content" data-el="#bjax-el" data-replace="true">
                    <i class="icon-social-youtube icon  text-primary"></i>
                    <span class="font-bold">MV</span>
                  </router-link>
                </li>
                <!--<li>-->
                  <!--<router-link :to="'/musicStateContent/' + id">-->
                    <!--<i class="icon-music-tone-alt icon text-info"></i>-->
                    <!--<span class="font-bold">歌单详情</span>-->
                  <!--</router-link>-->
                <!--</li>-->

                <li>
                  <a>
                    <i class="icon-film  text-warning"></i>
                    <span class="font-bold">电台</span>
                  </a>
                </li>

                <li class="m-b hidden-nav-xs"></li>

              </ul>
              <ul class="nav text-sm">
                <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                  <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                  Playlist
                </li>
                <li>
                  <a href="#">
                    <i class="icon-music-tone icon"></i>
                    <span>Hip-Pop</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-playlist icon text-success-lter"></i>
                    <b class="badge bg-success dker pull-right">9</b>
                    <span>Jazz</span>
                  </a>
                </li>
                <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                  <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                  我创建的歌单
                </li>
                <li v-for='(item,index) in leftNavList.playlist' @click="goSongList(item.id)"
                    style='margin-bottom: 5px;'>
                  <a>
                    <i><img v-lazy="item.coverImgUrl" height=36px  alt=""></i>
                    <b v-show='!leftNav' class="badge bg-primary dker pull-right"
                       style='margin:0px -15px 0 0 '>{{item.trackCount}}</b>
                    <span>{{item.name.length < 10 ? item.name : item.name.substr(0, 12) + '...'}}</span>
                  </a>
                </li>
              </ul>
            </nav>
            <!-- / nav -->
          </div>
          <div class="slimScrollBar"
               style="background: rgb(0, 0, 0); width: 10px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 0px; height: 870px;"></div>
          <div class="slimScrollRail"
               style="width: 10px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;"></div>
        </div>
      </section>

      <footer class="footer hidden-xs no-padder text-center-nav-xs">
        <div class="bg hidden-xs ">
          <div class="dropdown dropup wrapper-sm clearfix">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs cd" :class="playing? 'play':'play pause'">
                        <img v-lazy="musicData.musicPic? musicData.musicPic:'../../../static/images/m0.jpg'"
                             class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
              <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong>
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
            </a>
            <ul class="dropdown-menu animated fadeInRight aside text-left">
              <li>
                <span class="arrow bottom hidden-nav-xs"></span>
                <a href="#">Settings</a>
              </li>
              <li>
                <a >Profile</a>
              </li>
              <li>
                <a >
                  <span class="badge bg-danger pull-right">3</span>
                  Notifications
                </a>
              </li>
              <li>
                <a >Help</a>
              </li>
              <li class="divider"></li>
              <li>
                <a data-toggle="ajaxModal">Logout</a>
              </li>
            </ul>
          </div>
        </div>
      </footer>
    </section>
  </aside>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'

  export default {
    data() {
      return {}
    },
    mounted() {
      this.$store.commit('fetchData', {url: '/user/playlist?uid=' + this.uid, func: 'leftNavList'})

    },
    methods: {
      goSongList(songId) {
        this.$store.commit('play', {id: songId, type: 'songList'})
        this.$store.commit('fetchData', {url: '/playlist/detail?id=' + songId, func: 'leftNavData'})
      }
    },
    computed: mapGetters([  //变量
      'leftNav',
      'uid',
      'leftNavList',
      'id',
      'musicData',
      'playing'
    ]),
  }
</script>
<style scoped lang='stylus' rel='stylesheet/stylus'>
  ::-webkit-scrollbar
  {
    width: 0;
    height: 0;
    display: none;
  }
  @keyframes rotate
    0%
      transform: rotate(0)
    100%
      transform: rotate(360deg)
  .cd
    &.play
      animation: rotate 20s linear infinite
    &.pause
      animation-play-state: paused
</style>
